<template>
    <div class="manage">
        <button 
            class="added" 
            @click="add"
        >
            新增
        </button>
        <div class="input-arae" v-show="showAdd">
            <input 
                type="text" 
                placeholder="请输入人员名称"
                v-model="nameValue"
            >
            <button @click="addName">确定</button>
        </div>
        <div class="list">
            <div class="list-title">
                <ul>
                    <li>姓名</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="list-info">
                <ul v-for="(item, index) of this.list" :key="index">
                    <li>{{item}}</li>
                    <li>
                        <span @click="changeEdit(index)">编辑</span>
                        <span @click="del(index)">删除</span>
                    </li>
                </ul>
            </div>
            <div class="piao"  v-show="showEdit">
                <div class="input-arae">
                    <input 
                        type="text"
                        v-model="changeValue"
                    >
                    <button @click="addNewName">确定</button>
                    <button @click="NoaddNewName">取消</button>
                </div>
            </div>
        </div>
        <homefooter class="footer" :class="{'isManage': isNowPage}"></homefooter>
    </div>
</template>

<script>
import homefooter from '../../components/footer'
export default {
    name: 'manage',
    components: {
        homefooter
    },
    data(){
        return {
            isNowPage: true,
            list: ['wangqiling','wangxiaojie'],
            showAdd : false,
            showEdit: false,
            nameValue: '',
            changeValue: '',
            itemIndex: ''
        }
    },
    methods: {
        add(){
            this.showAdd = !this.showAdd
        },
        addName(){
            let v = this.nameValue
            if(v.length == 0){
                alert('请输入新增人员姓名')
            }else{
                this.list.push(v)
                this.nameValue = ''
            }
        },
        del(index){
            this.list.splice(index, 1)
        },
        changeEdit(index){
            this.changeValue = this.list[index]
            this.showEdit = true
            this.itemIndex = index 
        },
        addNewName(){
            if(!this.changeValue){
                alert('请输入新名字')
                return false
            }
            this.list.splice(this.itemIndex,1,this.changeValue)
            this.changeValue = ''
            this.showEdit = false
        },
        NoaddNewName(){
            this.showEdit = false
            this.changeValue = ''
        }

    }
}
</script>

<style lang="stylus" scoped>
.manage
    margin-bottom 50px
    .added
        width 70%
        margin 0 15%
        height 40px
        line-height 40px
        border-radius 5px
        background #41b883
        color #ffffff
    .input-arae
        display flex
        width 80%
        margin 20px 10%
        input 
            flex 1
            box-sizing border-box
            border 1px solid #cccccc
            border-radius 5px
            padding 5px
            margin-right 10px
        button 
            width 60px
            height 40px
            line-height 40px
            border-radius 5px;
            background #41b883
            color #ffffff
            margin 0 5px
    .list
        .list-title
            ul
                display flex
                text-align center
                line-height 40px
                font-weight bold
                width 100%
                li
                    flex 1
        .list-info
            ul
                display flex
                text-align center
                line-height 40px
                width 100%
                li
                    flex 1
                    span 
                        padding 5px
    .piao
        position absolute
        top 0
        left 0
        bottom 0
        right 0
        background rgba(0,0,0,.4)
        z-index 2
        .input-arae
            margin-top 5rem
    .footer
        position fixed
        z-index 1
        bottom 0
</style>
